<template>
	
	<div style="width:23%;"></div>
	
	<div style="width:50%;height:50%;">
		<table  border="1"  style=" width: 100%;">
			<tr>
			<th colspan="4" align="center">登录</th>
           </tr> 
		   <tr>
		   		<th colspan="1" align="center">账号:</th>
				<th colspan="3"  align="center"><input type="text" v-model="user.username"  placeholder="请输入账号"/></th>
		   </tr>                                              <!--  user.username -->       
		   <tr>
		   		<th colspan="1"  align="center">密码:</th>
		   		<th colspan="3" align="center"><input type="password"  v-model="user.password" placeholder="请输入密码"/></th>
		   </tr>                                <!--  user.password -->
			<tr>
			<th colspan="4" align="center"><button @click="login()">登录</button></th>
            </tr>

		</table>
		<br />
	</div>
	<div style="width:23%;"></div>
</template>

<script>
	export default{
		data(){
			return{
				user:{
				},
				
			}
		},
		methods:{
			login(user){
				console.log(this.user)
				console.log(this.$ip)
				let that=this;
				let fd=new FormData();
				fd.append("username",this.user.username)
				fd.append("password",this.user.password)
				   // 用 post方式进行传入账号和密码  获取 token值  获取用户信息
				   
			 	this.$axios.post(`${that.$ip}/api/login`,fd,{
					headers:{
					'Content-Type': 'multipart/form-data'
					}
				}).then((resp)=>{
					    // 获取 token值  相当于拿到 身份令牌
					window.localStorage.setItem('token',resp.data.data.token);
					console.log(resp.data.data.token);

                // 根据 token值 (身份令牌) 获取该用户的身份信息 
					that.$axios.get(`${that.$ip}/api/user/info`,{
					headers:{
						'Authorization':`Bearer ${resp.data.data.token}`
						}
				}).then((resp)=>{
					console.log(resp.data)
					that.$store.state.user.token=resp.data.data.token;
				    that.$store.state.user.name=resp.data.data.uname;
					that.$store.state.user.role=resp.data.data.role;
					that.$store.state.user.pic=resp.data.data.pic;
				  console.log(that.$store.state.user)
				if(resp.data.data.role == "adm"){
					this.$store.state.user.rloename='管理员'
					this.$router.push("/adm")
					console.log(this.$store.state.user.role)
				}
				if(resp.data.data.role == "stu"){
					this.$store.state.user.rloename='学生'
					this.$router.push("/stu")
					console.log(this.$store.state.user.role)
				}
				if(resp.data.data.role == "tea"){
					this.$store.state.user.rloename='教师'
					this.$router.push("/tea")}
	
				})
				});
			}
		},
		mounted(){
			
		}
	}
</script>